<template>
  <div class="swiper_top">
    <swiper :key="bannerList.length" :swiperOption="swiperOption">
      <swiper-slide v-for="item in bannerList" :key="item.bannerId">
        <img :src="item.imgUrl" />
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { getMoviesSwiperAPI } from "@/network/api";
import Swiper from "@/components/Swiper";
import { swiperSlide } from "vue-awesome-swiper";

export default {
  components: {
    Swiper,
    swiperSlide,
  },
  data() {
    return {
      bannerList: [],
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 1000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        // 显示分页（不配置属性不显示）
        // pagination: {
        //   el: ".swiper-pagination",

        //   // clickable: true, //允许分页点击跳转
        // },
        // // 自己定义的属性，决定箭头是否显示
        // showNavigation: false,
        // 设置点击箭头
      },
    };
  },
  mounted() {
    getMoviesSwiperAPI({
      type: 2,
      cityId: 110100,
      k: 555387,
    }).then((res) => {
      this.bannerList = res.data.data;
    });
  },
};
</script>

<style scoped  lang="less" >
.swiper_top {
  height: 210px;
  position: relative;
  .swiper-container {
    height: 195px;
    position: absolute;
    top: 50%; /*左上角向下移动到外面div的高度的一半*/
    transform: translateY(-50%);
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>